<template>
  <!-- map-chart -->
  <div :id="mapIdVal" class="🍕" style="width: 500px; height: 500px"></div>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted } from "vue";
import * as echarts from "echarts";
import myData from "../assets/100000_full.json";
// import axios from "axios";
export default defineComponent({
  name: "MapChart-comp",
  props: {
    test: String,
    mapId: String,
    dataSet:Array,
  },
  // setup(props) {
  //   const refdemo = ref(props.mapId);
  //   // let mapIdVal:String="111";
  //   // var mapId:String=props.mapId||'';
  //   console.log(
  //     `%c  refdemo=${refdemo.value}`,
  //     "background: linear-gradient(114deg, rgba(78,126,218,1) 0%, rgba(133,44,221,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
  //   );
  //   console.log(
  //     `%c  components/MapChart Setup(props) props:test:${props.test} mapid:${props.mapId}`,
  //     "background: linear-gradient(114deg, rgba(78,161,218,1) 0%, rgba(44,95,221,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
  //   );
  //   return { test: String, mapId: String, refdemo };

  // },
  data() {
    return {
      dataSet:this.dataSet,
      mapIdVal:this.mapId,
    };
  },
  methods: {
    drawGeo(mapdata: any) {
      let mapIdLet=this.mapIdVal as string;
      type EChartsOption = echarts.EChartsOption;
      var chartDom = document.getElementById(mapIdLet)!;
      var myChart = echarts.init(chartDom);
      var option: EChartsOption;
      echarts.registerMap("geojson", mapdata); // world同理
      myChart.setOption({
        // 进行相关配置
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          formatter: ["{b}", "{c}"].join("\n"),
        },
        title: {
          text: "区域统计",
          subtext: "2021年10月统计数据",
          left: "center",
        },
        visualMap: {
          left: "right",
          min: 0,
          max: 100,
          inRange: {
            color: [
              "#e0f3f8",
              "#abd9e9",
              "#74add1",
              "#4575b4",
              "#313695",

              // "#ffffbf",
              // "#fee090",
              // "#fdae61",
              // "#f46d43",
              // "#d73027",
              // "#a50026",
            ],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        series: [
          {
            emphasis: {
              label: {
                show: true,
              },
            },
            type: "map",
            map: "geojson",
            roam: true,
            zoom: 1.2,
            data:this.dataSet
          },
        ],
      });
      // option && myChart.setOption(option);
    },
  },
  mounted() {
    // 不要这样加载地图 否则会加载不出
    // axios.get("./geojson.json").then((res) => {
    //   console.log(res);
    //   setTimeout(this.drawGeo(res),2000);
    // });
    // 应该在js中import这个地图的json文件
    this.drawGeo(myData);
    console.log(
      `%c  OnMounted -- mapId:${this.mapIdVal}`,
      "background: linear-gradient(114deg, rgba(133,114,134,1) 0%, rgba(173,173,173,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
    );
    console.log(
      "%c  components/MapChart mounted  ",
      "background: linear-gradient(114deg, rgba(133,114,134,1) 0%, rgba(173,173,173,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
    );
    console.log(
      `%c  --- test:${this.test} mapid:${this.mapId}`,
      "background: linear-gradient(114deg, rgba(133,114,134,1) 0%, rgba(173,173,173,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
    );
  },
});
</script>

<style>
.🍕{
  /* emoji做类名 */
  /* border:2px orange solid; */
}
</style>